<script setup lang="ts">
import { getCurrentInstance, ref, reactive, watch, onBeforeMount, onMounted, onUpdated, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
const { proxy } = getCurrentInstance()
const forSys = proxy.$Sys || []

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const curkey = ref(proxy.$route.query.curIndex || 1)
const cures = [{
  text: '经销合作商',
  type: 'get',
  url: 'teams/index',
  data: {
    params: {
      'TeamsSearch[type]': 1,
      // ----
      sort: 'SORT_DESC'
    }
  }
}, {
  text: '为你服务',
  type: 'get',
  url: 'teams/index',
  data: {
    params: {
      'TeamsSearch[type]': 2,
      // ----
      sort: 'SORT_DESC'
    }
  }
}]
// ----
const forSearch = ref(proxy.$Store.get('forSearch') || {})
// ----
let menuSwiper = null
// ----
const forFree = 9 / 5
const setTrueStyle = ref({})
// ----
let myIndex = 0
let myProvince = null
const myCityData = ref([])
// ----
const tSpeed = 300
let bar = null
let clientWidth = 0
let navWidth = 0
let navSwiper = null
const navText = '全部区域'
// ----
const fold = reactive({
  count: 3,
  height: 0,
  info: ''
})
// --mescroll--
let noData = proxy.$Global.noData
let mescroll = null
const items = ref([])

/* ---- */
const sliding = ref()
const preImg = ref()
const layer = ref()
const layerBox = ref()
const layerLoading = ref()

/* ---- */
// 合作意向数组
const capitals = ref()
const initData = () => {
  const cityItems = []
  proxy.$City.forEach((item, index) => {
    cityItems.push({
      value: String(item.value),
      text: proxy.$Myfun.setText(item.text)
    })
    // ----
    if (String(item.text) === String(myProvince)) myIndex = index + 1
  })
  myCityData.value = cityItems

   // --获取销售属性--
  const capitalItems = forSys.filter((item) => { return String(item.name) === 'market_capitalattrib' })
  if (Number(capitalItems.length) === 1) {
    proxy.$Myfun.getJsonData(capitalItems[0].value, (resJson) => {
      const newItems = {}
      resJson[0].list.forEach((item, index) => {
        newItems[item.id] = proxy.$Myfun.setText(item.name)
      })
      capitals.value = newItems
    })
  }
  
}
// --initSwiperData || changeSwiperData--
const onSwiper = (swiper) => { navSwiper = swiper }
const initSwiper = (index) => {
  if (Number(myCityData.value.length) === 0) return false
  // --初始化--
  if (!navSwiper.el.querySelector('.bar')) {
    const newBar = document.createElement('div')
    newBar.setAttribute('class', 'bar')
    newBar.innerHTML = '<span class="xw-anim"></span>'
    navSwiper.wrapperEl.appendChild(newBar)
  }
  bar = navSwiper.el.querySelector('.bar')
  navSwiper.slides[navSwiper.activeIndex].querySelector('span').style.color = '#3388ff'
  // --Nav的可视宽度--
  clientWidth = navSwiper.wrapperEl.offsetWidth
  navWidth = 0
  for (let i = 0; i < navSwiper.slides.length; i++) {
    navWidth += navSwiper.slides[i].offsetWidth
  }
  // --点击slide事件--
  navSwiper.on('tap', () => {
    const newItems = []
    if (navSwiper.slides[navSwiper.clickedIndex].querySelector('span').innerText !== String(navText)) newItems.push(navSwiper.slides[navSwiper.clickedIndex].querySelector('span').innerText)
    proxy.$Myfun.setSearchRes(proxy, newItems, ['province'], (result) => { forSearch.value = result })
  })
  // ----
  setTimeout(() => { swiperMescroll(index) }, 100)
}
const swiperMescroll = (index) => {
  const clickIndex = index
  const clickSlide = navSwiper.slides[clickIndex]
  const activeSlidePosition = navSwiper.slides[clickIndex].offsetLeft

  // --释放时导航移动过渡--
  bar.style.transitionDuration = tSpeed + 'ms'
  bar.style.width = clickSlide.offsetWidth + 'px'
  bar.querySelector('span').style.width = clickSlide.querySelector('span').offsetWidth + 'px'
  bar.style.transform = 'translateX(' + activeSlidePosition + 'px)'

  // --导航居中--
  const navSlideWidth = clickSlide.offsetWidth
  // --activeSlide距左边的距离--
  const navActiveSlideLeft = navSwiper.slides[clickIndex].offsetLeft

  navSwiper.setTransition(tSpeed)
  if (navWidth > clientWidth) {
    if (navActiveSlideLeft < (clientWidth - navSlideWidth) / 2) {
      navSwiper.setTranslate(0)
    } else if (navActiveSlideLeft > navWidth - (navSlideWidth + clientWidth) / 2) {
      navSwiper.setTranslate(clientWidth - navWidth)
    } else {
      navSwiper.setTranslate((clientWidth - navSlideWidth) / 2 - navActiveSlideLeft)
    }
  }

  navSwiper.slides.forEach((current) => { current.querySelector('span').style.color = '#111111' })
  clickSlide.style.transitionDuration = tSpeed + 'ms'
  clickSlide.querySelector('span').style.color = '#3388ff'
}
// ----
const onSwiperMenu = (swiper) => { menuSwiper = swiper }
const initmenuSwiper = (index) => {
  if (Number(cures.length) === 0) return false
  // --初始化--
  menuSwiper.slides.forEach((current) => { current.classList.remove('active') })
  menuSwiper.slides[index].classList.add('active')
  menuSwiper.slideTo(index)
  // --点击slide事件--
  menuSwiper.on('tap', async () => {
    menuSwiper.slides.forEach((current) => { current.classList.remove('active') })
    menuSwiper.slides[menuSwiper.clickedIndex].classList.add('active')
    // ----
    curkey.value = menuSwiper.clickedIndex
    // ----
    await getCurrencyInfo()
    proxy.$Myfun.setSearchRes(proxy, [], ['province'], (result) => { forSearch.value = result })
    // ----
    const forExtend = Number(menuSwiper.clickedIndex) > 0 ? { curIndex: menuSwiper.clickedIndex } : {}
    proxy.$Myfun.openPage(proxy, 'replace', proxy.$route.name, forExtend)
  })
}
// ----
const getTrueStyle = () => {
  if (proxy.$refs.forTrueWidth) {
    const imgEL = proxy.$refs.forTrueWidth
    const imgRatio = forFree
    setTrueStyle.value = { height: `${Math.round(imgEL.offsetWidth / imgRatio)}px` }
  }
}
// ----
const getFoldStyle = () => {
  if (proxy.$refs.forTrueHeight) fold.height = proxy.$refs.forTrueHeight.offsetHeight
}
// ----
const getCurrencyInfo = async (callback) => {
  setTimeout(() => {
    getTrueStyle()
    // ----
    getFoldStyle()
  }, 100)
  // ----
  callback && callback()
}
// --getData--
const startMeScroll = () => {
  mescroll = new MeScroll(proxy.$refs.dataScroll, {
    up: {
      callback: getListData,
      isBounce: false,
      page: { num: 0, size: 10 },
      htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
      noMoreSize: 10,
      toTop: {
        src: '/pics/mescroll-totop.png',
        offset: 1000
      },
      empty: {
        warpId: proxy.$refs.dataList,
        tip: noData
      }
    }
  })
}
const getListData = (page) => {
  const extra = {
    'TeamsSearch[citys]': myProvince ? ',' + myProvince + ',' : undefined,
    // ----
    page: page.num,
    PageSize: page.size
  }
  switch (String(cures[curkey.value].type)) {
    case 'post': {
      Object.assign(cures[curkey.value].data, extra)
      break
    }
    case 'get': {
      Object.assign(cures[curkey.value].data.params, extra)
      break
    }
  }
  // ----
  getListDataFromNet({
    forType: cures[curkey.value].type,
    forUrl: cures[curkey.value].url,
    forData: cures[curkey.value].data
  }, page.num, page.size, (curPageData) => {
    switch (Number(curkey.value)) {
      case 0: {
        setListDataOne(curPageData).then((result) => {
          mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
          items.value = items.value.concat(result)
        })
        break
      }
      case 1: {
        setListDataTwo(curPageData).then((result) => {
          mescroll.endSuccess(curPageData ? curPageData.length : 0, true)
          items.value = items.value.concat(result)
        })
        break
      }
    }
  }, (resMsg) => {
    mescroll.endErr()
    proxy.$Myfun.forToast(layer.value, 'open', resMsg)
  })
}
const getListDataFromNet = (option, pageNum, pageSize, successCallback, errorCallback) => {
  if (Number(pageNum) === 1) {
    if (document.querySelector('.upwarp-nodata')) { document.querySelector('.upwarp-nodata').style.visibility = 'hidden' }
    items.value = []
  }
  // ----
  proxy.$http[option.forType](option.forUrl, option.forData).then((res) => {
    switch (String(option.forType)) {
      case 'post': {
        if (res.success) {
          successCallback && successCallback(res.datainfo)
        } else { errorCallback && errorCallback(res.message) }
        break
      }
      case 'get': {
        successCallback && successCallback(res.items)
        break
      }
    }
  }).catch((err) => { errorCallback && errorCallback(err) })
}
const getFoldState = () => {
  return new Promise((resolve, reject) => {
    nextTick(() => {
      const curFoldH = proxy.$refs.forTrueHeight.offsetHeight
      if (Number(curFoldH / fold.height) > Number(fold.count)) {
        resolve(true)
      } else {
        resolve(false)
      }
    })
  })
}
const setListDataOne = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let forSex = ''
    if (Number(item.gender) > 0) forSex = (Number(item.gender) === 1) ? 'fa fa-user-tie-hair xw-color-12' : 'fa fa-user-tie-hair-long xw-color-5'
    // ----
    let forImg = ''
    const advItems = []
    await proxy.$Myfun.getJsonData(item.img_json, (resJson) => {
      if (Number(resJson.length) > 0) forImg = resJson[0].image
      // ----
      resJson.forEach((theItem) => {
        advItems.push({
          msrc: theItem.image,
          src: theItem.image,
          width: theItem.width,
          height: theItem.height,
          alt: ''
        })
      })
    })
    // ----
    let forFold = false
    fold.info = proxy.$Myfun.setText(item.introduce)
    await getFoldState().then((result) => { forFold = result })
    // ----
    newItems.push({
      id: item.id,
      company_name: proxy.$Myfun.setText(item.company_name),
      name: proxy.$Myfun.setText(item.name),
      sexIcon: forSex,
      age: item.birthday ? item.birthday.replace(/-/g, '.') : '',
      remark: fold.info,
      telphone: item.telphone,
      attribute_arr: item.attribute_arr,
      // ----
      image: forImg,
      advs: advItems,
      // ----
      isFold: forFold,
      isOpenInfo: Number(item.status) === 1
    })
    // ----
    fold.info = ''
  }
  return newItems
}
const setListDataTwo = async (items) => {
  const newItems = []
  for (let i = 0; i < Number(items.length); i++) {
    const item = items[i]
    // ----
    let forSex = ''
    if (Number(item.gender) > 0) forSex = (Number(item.gender) === 1) ? 'fa fa-user-tie-hair xw-color-12' : 'fa fa-user-tie-hair-long xw-color-5'
    // ----
    let forImg = ''
    const advItems = []
    await proxy.$Myfun.getJsonData(item.img_json, (resJson) => {
      if (Number(resJson.length) > 0) forImg = resJson[0].image
      // ----
      resJson.forEach((theItem) => {
        advItems.push({
          msrc: theItem.image,
          src: theItem.image,
          width: theItem.width,
          height: theItem.height,
          alt: ''
        })
      })
    })
    // ----
    newItems.push({
      id: item.id,
      company: proxy.$Myfun.setText(item.name),
      leader: proxy.$Myfun.setText(item.leader),
      sexIcon: forSex,
      remark: proxy.$Myfun.setText(item.introduce),
      attribute_arr: item.attribute_arr,
      // ----
      image: forImg,
      advs: advItems,
      // ----
      isOpenInfo: Number(item.status) === 1
    })
  }
  return newItems
}
const divScroll = (event) => { proxy.$Myfun.setImgToTop() }
// ----
const getHeadFun = (type, item) => {
  switch (Number(type)) {
    case 1: {
      proxy.$Myfun.getTopH().then((result) => {
        const forSlideTop = result
        // ----
        const options = {
          type: 3,
          forall: { show: true, text: '不限区域', value: '' },
          boxTop: { top: forSlideTop + 'px' },
          slideName: 'slideDown',
          boxClass: 'SLB-box-down',
          floatClass: 'xw-float-W3',
          itemName: myProvince || '',
          title: '区域',
          align: { textAlign: 'center' },
          list: myCityData.value,
          callback: (info) => { proxy.$Myfun.setSearchRes(proxy, info, ['province'], (result) => { forSearch.value = result }) }
        }
        proxy.$Myfun.isIndepth(sliding.value, 'open', options)
      })
      break
    }
  }
}
const getAuditFun = async (type, item, event) => {
  switch (Number(type)) {
    case 1: {
      if (Number(item.advs.length) > 0) {
        const curEL = event.currentTarget
        const options = {
          actElement: curEL,
          addopt: {
            loop: true,
            dataSource: item.advs
          }
        }
        proxy.$Myfun.isIndepth(preImg.value, 'openPhotoSwipe', options)
      }
      break
    }
    case 2: {
      proxy.$Myfun.openPage(proxy, 'push', 'CapitalUserReg', { id: item.id })
      break
    }
    case 3: {
      const options = {
        content: proxy.$Global.layer.conDel,
        button: [{
          text: proxy.$Global.layer.btnCancel
        }, {
          text: proxy.$Global.layer.btnDel,
          class: 'xw-color-24',
          callback: async () => {
            layerBox.value.close()
            // ----
            proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
            // ----
            if (Number(item.advs.length) > 0) {
              const opts = {
                region: proxy.$Global.aoss.region,
                bucket: proxy.$Global.aoss.bucket,
                accessKeyId: proxy.$Global.aoss.accessKeyId,
                accessKeySecret: proxy.$Global.aoss.accessKeySecret
              }
              const imgArr = item.advs
              for (let i = 0; i < Number(imgArr.length); i++) {
                await proxy.$OssUp.ossDelete(opts, imgArr[i].name)
              }
            }
            // ----
            await proxy.$http.delete('teams/delete?id=' + item.id, {
              config_id: userInfo.config_id,
              openid: userInfo.openid
            }).then((res) => {}).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
            // ----
            proxy.$Myfun.disLoading(layerLoading.value, 'close')
            mescroll.scrollTo(0)
            mescroll.resetUpScroll()
          }
        }]
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
      break
    }
    case 4: {
      let forOpen = true
      let forCurState = 1
      if (item.isOpenInfo) {
        forOpen = false
        forCurState = 0
      }
      // ----
      proxy.$http.patch('teams/update?id=' + item.id, {
        status: forCurState,
        // ----
        config_id: userInfo.config_id,
        openid: userInfo.openid
      }).then((res) => {
        item.isOpenInfo = forOpen
      }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
      break
    }
    case 5: {
      let forDesc = '<div style="line-height: 2.5rem; text-align: justify;"><b>' + item.company + '</b><div>'
      if (item.remark && Number(item.remark.length) > 0) forDesc = '<div style="line-height: 2.5rem; text-align: justify;"><b style="display: block; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #d7d7d7;">' + item.company + '</b>' + item.remark + '<div>'
      const options = {
        type: 3,
        content: forDesc
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
      break
    }
    case 6: {
      window.location.href = 'tel:' + item.telphone
      break
    }
    case 7: {
      const forItem = item || {}
      proxy.$Myfun.openPage(proxy, 'push', 'CapitalCompanyReg', { id: forItem.id })
      break
    }
    case 8: {
      const options = {
        content: proxy.$Global.layer.conDel,
        button: [{
          text: proxy.$Global.layer.btnCancel
        }, {
          text: proxy.$Global.layer.btnDel,
          class: 'xw-color-24',
          callback: async () => {
            layerBox.value.close()
            // ----
            proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
            // ----
            if (Number(item.advs.length) > 0) {
              const opts = {
                region: proxy.$Global.aoss.region,
                bucket: proxy.$Global.aoss.bucket,
                accessKeyId: proxy.$Global.aoss.accessKeyId,
                accessKeySecret: proxy.$Global.aoss.accessKeySecret
              }
              const imgArr = item.advs
              for (let i = 0; i < Number(imgArr.length); i++) {
                await proxy.$OssUp.ossDelete(opts, imgArr[i].name)
              }
            }
            // ----
            await proxy.$http.delete('teams/delete?id=' + item.id, {
              config_id: userInfo.config_id,
              openid: userInfo.openid
            }).then((res) => {}).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
            // ----
            proxy.$Myfun.disLoading(layerLoading.value, 'close')
            mescroll.scrollTo(0)
            mescroll.resetUpScroll()
          }
        }]
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
      break
    }
    case 9: {
      let forOpen = true
      let forCurState = 1
      if (item.isOpenInfo) {
        forOpen = false
        forCurState = 0
      }
      // ----
      proxy.$http.patch('teams/update?id=' + item.id, {
        status: forCurState,
        // ----
        config_id: userInfo.config_id,
        openid: userInfo.openid
      }).then((res) => {
        item.isOpenInfo = forOpen
      }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
      break
    }
  }
}

/* ---- */
watch(() => forSearch.value, (newVal, oldVal) => {
  myProvince = newVal.province
  // ----
  myIndex = 0
  myCityData.value.some((item, index) => {
    if (String(item.text) === String(myProvince)) myIndex = index + 1
  })
  nextTick(() => { swiperMescroll(myIndex) })
  // --重新请求数据--
  mescroll.scrollTo(0)
  mescroll.resetUpScroll()
}, { deep: true })

/* ---- */
onBeforeMount(() => {
  myProvince = forSearch.value.province
  // ----
  initData()
})
onMounted(() => {
  getCurrencyInfo(() => {
    nextTick(() => { initSwiper(myIndex) })
    // nextTick(() => { initmenuSwiper(curkey.value) })
    // --创建MeScroll对象--
    setTimeout(() => { startMeScroll() }, 500)
  })
})
onUpdated(() => { nextTick(() => { proxy.$Myfun.setSectionH() }) })
onBeforeRouteLeave(() => {
  if (mescroll) mescroll.destroy()
  proxy.$Store.remove('forSearch')
})

// 点击号码拨打电话
const clickPhone = (tel:any) => {
  window.location.href = 'tel:' + tel;
}
</script>

<template>
  <div>
    <header class="xw-bg-gray">
      <!-- <div class="forCha xw-bgCL-11" v-if="Number(cures.length) > 0">
        <swiper class="FCA-menu" :slides-per-view="2" @swiper="onSwiperMenu">
          <swiper-slide class="xw-flex" v-for="(item, index) in cures"><div class="xw-flex"><p class="xw-anim xw-flex-W1 xw-flex xw-flex-center">{{item.text}}</p></div></swiper-slide>
        </swiper>
      </div> -->
      <!---->
      <div class="forMenu xw-flex xw-flex-align" v-if="Number(myCityData.length) > 0">
        <div class="FMU-menu xw-flex-W1">
          <div class="FMU-box FMU-L FMU-R">
            <swiper :slides-per-view="'auto'" :freeMode="true" @swiper="onSwiper">
              <swiper-slide><span class="xw-middle">{{navText}}</span></swiper-slide>
              <swiper-slide v-for="(item, index) in myCityData"><span class="xw-middle">{{item.text}}</span></swiper-slide>
            </swiper>
          </div>
        </div>
        <a class="fa fa-list-ul FMU-icon xw-color-12 FMU-R xw-flex xw-flex-center" @click="getHeadFun(1)"></a>
      </div>
    </header>
    <div class="xw-section">
      <div ref="dataScroll" class="mescroll" @scroll="divScroll">
        <ul class="list-user xw-flex xw-flex-column" ref="dataList">
          <template v-if="Number(curkey) === 0">
          <li class="xw-bg-white xw-radius-3" v-for="(item, index) in items">
            <div class="LUR-con xw-flex xw-flex-align FNV-title xw-ellipsis" v-if="item.name">
              <em :class="item.sexIcon" v-if="item.sexIcon"></em>
              <div>{{item.name}}</div>
              <div class="xw-flex-W1 xw-color-3">&nbsp;@{{item.company_name || ""}}</div>
            </div>
            <div class="LUR-con xw-flex">
              <div class="LUR-img xw-radius-3 xw-act" @click="getAuditFun(1, item, $event)" v-if="item.image"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.image + ')' }"></div></div>
              <div class="LUR-com xw-flex-W1 xw-flex xw-flex-column xw-flex-justify">
                <div class="LUR-desc xw-flex" v-if="item.remark" @click="getAuditFun(1, item, $event)">
                  <input type="checkbox" :id="'check_' + index" class="xw-fold-handle"/>
                  <div class="xw-fold-text">
                    <label class="xw-fold-btn" :for="'check_' + index" v-if="item.isFold"></label>
                    {{item.remark}}
                  </div>
                </div>
                <div class="LUR-desc xw-flex xw-flex-justify" v-if="item.telphone">
                  <div class="xw-fold-text">
                    <em class="fal fa-phone-volume xw-color-1"></em> <span class="xw-color-1" @click="clickPhone(item.telphone)">{{item.telphone}}</span>
                  </div>
                  <span class="TOP-Lfg">{{capitals[item.attribute_arr]}}</span> 
                </div>
              </div>
            </div>
            <div class="LUR-btns xw-flex xw-flex-align xw-flex-justify">
              <div class="xw-btn xw-WBlue" @click="getAuditFun(2, item)">修改</div>
              <div class="xw-btn xw-WBlue" @click="getAuditFun(3, item)">删除</div>
              <div class="LUR-check xw-flex xw-flex-align">
                <span>审核</span>
                <div class="USS-check" @click="getAuditFun(4, item)"><input type="checkbox" class="a-switch" v-model="item.isOpenInfo"/><label></label></div>
              </div>
            </div>
          </li>
          <div class="list-li list-li-fold"><div ref="forTrueHeight">{{fold.info}}</div></div>  
          </template>
          <template v-if="Number(curkey) === 1">
          <li class="xw-bg-white xw-radius-3" v-for="(item, index) in items">
            <div class="LUR-title xw-ellipsis">{{item.company}}</div>
            <div class="LUR-adv xw-act" :style="setTrueStyle" @click="getAuditFun(1, item, $event)" v-if="item.image"><div class="xw-bgImg" :style="{ backgroundImage: 'url(' + item.image + ')' }"></div></div>
            <div class="LUR-info xw-flex xw-flex-align">
              <div class="xw-flex-W1">
                <div class="LUR-leader xw-flex xw-flex-align" v-if="item.leader">
                  <span class="xw-color-20">业务负责：</span>
                  <div class="LUR-max xw-ellipsis">{{item.leader}}</div>
                  <em :class="item.sexIcon" v-if="item.sexIcon"></em>
                </div>
              </div>
              <a class="LUR-btn xw-Rfg" @click="getAuditFun(5, item)"><em class="fal fa-book-open-cover xw-color-1"></em></a>
              <a class="LUR-btn" @click="getAuditFun(6, item)"><em class="fal fa-phone-volume xw-color-3"></em></a>
            </div>
            <div class="LUR-btns xw-flex xw-flex-align xw-flex-justify">
              <div class="xw-btn xw-WBlue" @click="getAuditFun(7, item)">修改</div>
              <div class="xw-btn xw-WBlue" @click="getAuditFun(8, item)">删除</div>
              <div class="LUR-check xw-flex xw-flex-align">
                <span>审核</span>
                <div class="USS-check" @click="getAuditFun(9, item)"><input type="checkbox" class="a-switch" v-model="item.isOpenInfo"/><label></label></div>
              </div>
            </div>
          </li>
          <div class="list-li list-li-img"><div ref="forTrueWidth"></div></div>
          </template>
        </ul>
      </div>
    </div>
    <footer v-if="Number(curkey) === 1">
      <div class="tabs TAB-dbtn xw-foot-Tfg xw-flex xw-flex-center">
        <div class="xw-radius-3 xw-bgCL-11 xw-act xw-flex-W1 xw-flex xw-flex-center" @click="getAuditFun(7)">新增服务团队</div>
      </div>
    </footer>
    <sliding-view ref="sliding"/>
    <preImg-view ref="preImg"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerBox"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>

<style scoped>
/* ---- */
.forMenu { height: 4rem; }

/* ---- */
.list-user li { position: relative; margin: 1rem 1rem 0; overflow: hidden; }
.LUR-con { padding: 1rem 1rem 0; }
.LUR-img { margin: 0 1rem 0 0; width: 9rem; height: 9rem; }
.LUR-name { height: 3rem; }
.LUR-name em { font-size: 1.6rem; margin-right: 0.5rem; }
.LUR-name div { font-size: 1.7rem; font-weight: bold; }
.LUR-age { margin-left: 0.5rem; font-size: 1.2rem; }
.LUR-btns { padding: 1rem; }
.LUR-check { overflow: visible; }
.LUR-check div { overflow: visible; }
.list-li-fold { padding: 0 2rem 0 12rem; }
.list-li-fold div { min-height: 2rem; line-height: 2rem; text-align: justify; }
.LUR-title { padding: 1rem; line-height: 2.5rem; font-size: 1.7rem; font-weight: bold; text-align: justify; }
.LUR-info { padding: 1rem 1rem 0; }
.LUR-leader em { font-size: 1.6rem; margin-left: 0.5rem }
.LUR-max { max-width: 16rem; }
.LUR-btn { padding: 0 1.2rem; }
.LUR-btn em { font-size: 2rem; }
.LUR-btn:last-of-type { padding-right: 0; }
.list-li-img { margin: 0 1rem; }
</style>